<template>
	<div class="sceditor">
		<Editor v-model="contentValue" custom="menuDateButton" :init="init" :disabled="disabled"
				:placeholder="placeholder" @onClick="onClick" :setup="init.setup"/>
		<el-dialog title="打开" v-model="showImg" :width="880" destroy-on-close :append-to-body="true">
			<sc-file-select @submit="submitAdd" :onlyImage="true" multiple>
				<template #do>
					<el-button @click="showImg=false" >取 消</el-button>
				</template>
			</sc-file-select>
		</el-dialog>
	</div>
</template>

<script>
import API from "@/api";
import config from "@/config/fileSelect";
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'
import 'tinymce/icons/default'

// 引入编辑器插件
import 'tinymce/plugins/code'  //编辑源码
// import 'tinymce/plugins/image'  //插入编辑图片
import 'tinymce/plugins/link'  //超链接
import 'tinymce/plugins/preview'//预览
import 'tinymce/plugins/table'  //表格
import scFileSelect from '@/components/scFileSelect'

export default {
	components: {
		Editor,
		scFileSelect
	},
	props: {
		custom: {
			//添加自定义菜单按钮
			type: String,
			default: "",
		},
		modelValue: {
			type: String,
			default: ""
		},
		placeholder: {
			type: String,
			default: ""
		},
		height: {
			type: Number,
			default: 300,
		},
		disabled: {
			type: Boolean,
			default: false
		},
		plugins: {
			type: [String, Array],
			default: 'code link preview table'
		},
		toolbar: {
			type: [String, Array],
			default: 'undo redo |  forecolor backcolor bold italic underline strikethrough link | formatselect fontsizeselect | \
					alignleft aligncenter alignright alignjustify outdent indent lineheight | bullist numlist | \
					 myCustomToolbarButton table  preview code'
		},

	},
	data() {
		// 富文本编辑框内容样式
		let _contentStyles = [];
		_contentStyles.push('body { font-family:Helvetica,Arial,sans-serif; font-size:14px }')
		_contentStyles.push('p {margin:0;padding:0;} img {vertical-align:middle;}')
		return {
			upload: '',
			editor_: null,
			showImg: false,
			init: {
				language_url: 'tinymce/langs/zh_CN.js',
				language: 'zh_CN',
				skin_url: 'tinymce/skins/ui/oxide',
				content_css: "tinymce/skins/content/default/content.css",
				menubar: false,
				statusbar: true,
				custom_images_upload: true,
				plugins: this.plugins,
				toolbar: this.toolbar,
				fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',
				height: this.height,
				placeholder: this.placeholder,
				branding: false,
				resize: true,
				elementpath: true,
				object_resizing: false,//禁止拖拽改变大小
				content_style: _contentStyles.join(''),
				file_picker_types: 'image',
				image_prepend_url: "http://tinymce.ax-z.cn/static/img/",//图片前缀设置
				// 上传图片
				setup: editor => {
					//新增自己的图片上传菜单
					this.editor_ = editor
					editor.ui.registry.addButton('myCustomToolbarButton', {
						tooltip: '上传图片',
						icon: 'image',
						onAction: () => {
							this.showImg = !this.showImg;
						},

					})
				},
				images_upload_handler: async (blobInfo, success, failure) => {
					const data = new FormData();
					data.append("file", blobInfo.blob(), blobInfo.filename());
					try {
						const res = await API.common.upload.post(data)
						success(res.data.src)
					} catch (error) {
						failure("Image upload failed")
					}
				},

			},
			contentValue: this.modelValue
		}
	},
	watch: {

		modelValue(val) {
			this.contentValue = val
		},
		contentValue(val) {
			this.$emit('update:modelValue', val);
		}
	},
	created() {
		tinymce.init(this.init)
	}
	,
	methods: {
		submitAdd(values = []) {
			//选择图片之后插入富文本内容
			this.showImg = false
			let htmls = []
			console.log(values)
			values.map(item => {
				htmls.push('<p><img src=' + item['base_url'] + item[config.fileProps.url] + ' data-src='+item[config.fileProps.url]+'></p>')
			})
			//把图片内容反显在富文本编辑器中
			this.editor_.execCommand('mceInsertContent', false, htmls.join(''))
		},
		onClick(e) {
			this.$emit('onClick', e, tinymce)
		}
	}
}
</script>

<style scoped>

</style>
